<!-- 事件数量统计 -->
<template>
	<view class="viewBg">
		<!-- 选择开始日期 -->
		<view class="selectDate">
			<image src="../../../static/img/calendar.png" mode="scaleToFill" style="width: 45upx;height: 45upx;"></image>
			<view class="uni-list-cell-db">
				<picker mode="date" :value="dateStart" :start="startDate" :end="endDate" @change="bindStartDateChange">
					<view class="uni-input">{{dateStart}}</view>
				</picker>
			</view>
		</view>
		<view class="lineH1"></view>
		<!-- 选择结束日期 -->
		<view class="selectDate" @click="onShowDatePicker2">
			<image src="../../../static/img/calendar.png" mode="scaleToFill" style="width: 45upx;height: 45upx;"></image>
			<view class="uni-list-cell-db">
				<picker mode="date" :value="dateEnd" :start="startDate" :end="endDate" @change="bindEndDateChange">
					<view class="uni-input">{{dateEnd}}</view>
				</picker>
			</view>
		</view>
		<view class="lineH1"></view>
		<view class="checkBox">
			<axb-check-box ref="radio3" :list="sartTime" @change="radioChangeType"></axb-check-box>
		</view>
		<button type="primary" @click="getPieData">搜索</button>

		<view class="lineH20"></view>
		<view class="canvasView">
			<mpvue-echarts :echarts="echarts" :onInit="pieInit" canvasId="pie" ref="pieChart" />
		</view>
		
		<!-- 列表 -->
		<!-- <view class="uni-list">
			<view class="uni-list-cell" v-for="(item,index) in list" :key="index">
				<view class="uni-list-cell-navigate uni-navigate-right">
					<view class="">{{item.title}}</view>
					<view class="">查看详情</view>
				</view>
			</view>
		</view> -->

	</view>
</template>

<script>
	import * as echarts from '@/components/mpvue-echarts/echarts/echarts.simple.min.js';
	import mpvueEcharts from '@/components/mpvue-echarts/mpvue-echarts/src/echarts.vue';
	import axbCheckBox from "@/components/axb-checkbox/axb-checkbox.vue"
	import {today,yesterday,week,month} from '../../../common/date-utils.js'
	const cityList = [{
		value: 55,
		name: '北京'
	}, {
		value: 38,
		name: '上海'
	}, {
		value: 20,
		name: '广州'
	}];
	
	let pieOption = {
		animation: false,
		backgroundColor: '#F8F8F8',
		color: ['#37A2DA', '#32C5E9', '#67E0E3', '#91F2DE', '#FFDB5C', '#FF9F7F'],
		series: [{
			label: {
				normal: {
					fontSize: 14
				}
			},
			type: 'pie',
			center: ['50%', '50%'],
			radius: [0, '60%'],
			data: [],
			itemStyle: {
				emphasis: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 2, 2, 0.3)'
				}
			}
		}]
	};
	
	export default {
		components: {
			mpvueEcharts,
			axbCheckBox,
			today,
			yesterday,
			week,
			month,
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				dateStart: currentDate,
				dateEnd: currentDate,
				list: [{
					title: "网格员提报3件"
				}, {
					title: "执行部门3件"
				}],
				
				echarts: echarts,
				sartTime:[{
					name:'本月',
					value:'month',
					checked:0
				},{
					name:'本周',
					value:'week',
					checked:0
				},{
					name:'今天',
					value:'today',
					checked:0
				},{
					name:'昨天',
					value:'yesterday',
					checked:0
				},{
					name:'全部',
					value:'total',
					checked:0
				}],
			};
		},
		onLoad() {
			pieOption.series[0].data =  [];
			// 
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			
		},
		methods: {
			bindStartDateChange: function(e) {
				this.dateStart = e.target.value

			},
			bindEndDateChange: function(e) {
				this.dateEnd = e.target.value;
			},
			
			pieInit(canvas, width, height) {
				let pieChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(pieChart)
			
				pieChart.setOption(pieOption)
				return pieChart
			},
			getPieData(){
				this.$http.get('ac/xagrid/appEventStatisticsService/getEventStatistics',{startDate:this.dateStart,endDate:this.dateEnd}).then((res)=>{
					var eventList = new Array();
					for(var i = 0;i<res.data.length;i++){
						var name;
						if(res.data[i].status === '1'){
							name = '未办结：' + res.data[i].count +'件'
						}else{
							name = '已办结：' + res.data[i].count +'件'
						}
						eventList.push({value:res.data[i].count,name:name});
					}
					pieOption.series[0].data =  eventList;
					this.$refs.pieChart.init();
					
				})
			},
			radioChangeType(value){
				console.log("选择的日期: " + JSON.stringify(value));
				if(value === 'month'){
					var m = month();
					console.log('月'+ m);
					this.dateStart = m[0];
					this.dateEnd = m[1];
				}else if(value === 'week'){
					var w = week();
					this.dateStart = w[0];
					this.dateEnd = w[1];
				}else if(value === 'today'){
					var t = today();
					this.dateStart = t;
					this.dateEnd = t;
				}else if(value === 'yesterday'){
					var y = yesterday();
					this.dateStart = y;
					this.dateEnd = y;
				}else if(value === 'total'){
					const currentDate = this.getDate({
						format: true
					});
					this.dateStart = '2019-01-01';
					this.dateEnd = currentDate;
				}
			},
			getDate(type) {
				const date = new Date();

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;
			}
		},

	}
</script>

<style>
	.viewBg {
		width: 100%;
		height: 100%;
		/* background-color: #0FAEFF; */
	}

	.cell-detail {
		margin-right: 20upx;
	}

	.uni-list-cell-navigate {
		justify-content: space-between;
	}

	.lineH20 {
		height: 20upx;
		width: 100%;
		background-color: #F7F7F7;
	}

	.lineH1 {

		height: 2upx;
		width: 100%;
		/* margin-left: 10upx; */
		background-color: #F7F7F7;
	}

	.selectDate {
		padding: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.canvasView {
		flex: 1;
        margin-left: 2%;
		flex-direction: column;
		width: 96%;
		height: 600upx;
	}
	.checkBox{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		flex-flow: wrap;
		margin: 20upx;
	}
	button {
		margin: 30upx;
	}
</style>
